<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane :label="initTitle" name="first">
                <template v-cloak v-if="activeName === 'first'">
                    <div class="filter-container">
                        <el-input v-model="queryInit.eat_name" class="filter-item w-200" size="medium" placeholder="吃饭人姓名"></el-input>
                        <el-input v-model="queryInit.eat_phone" class="filter-item w-200" size="medium" placeholder="吃饭人电话"></el-input>
                        <el-select class="filter-item w-200" size="medium" v-model="queryInit.eat_type" clearable placeholder="订餐类型">
                            <el-option label="早餐" value="1"></el-option>
                            <el-option label="午餐" value="2"></el-option>
                            <el-option label="晚餐" value="3"></el-option>
                        </el-select>
                        <div class="filter-item block">
                            <el-date-picker
                                    size="medium"
                                    v-model="queryInit.eat_date"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="订餐日期">
                            </el-date-picker>
                        </div>
                        <el-select class="filter-item w-200" size="medium" v-model="queryInit.is_calculated" clearable placeholder="是否结算餐费">
                            <el-option label="已结算" value="1"></el-option>
                            <el-option label="未结算" value="0"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryInit.price_rule" clearable placeholder="计费规则">
                            <el-option label="固定餐标" value="1"></el-option>
                            <el-option label="计算餐标" value="2"></el-option>
                            <el-option label="计全额" value="3"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryInit.orderType" clearable placeholder="订单类型">
                            <el-option label="正常订单" value="normal"></el-option>
                            <el-option label="加餐订单" value="addition"></el-option>
                            <el-option label="子女订单" value="children"></el-option>
                        </el-select>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchInitList(true)">搜 索</el-button>
                        <el-button class="filter-item" size="medium" icon="el-icon-download" @click="downloadOrder(queryInit.status)">导出订单</el-button>
                    </div>
                    <el-table v-loading="loading" :data="bookOrdersInit" border style="width: 100%">
                        <el-table-column width="100px" label="#" align="center">
                            <template slot-scope="scope" >
                                {{queryInit.size * (queryInit.page-1) + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="eat_name" label="吃饭人姓名" align="center"></el-table-column>
                        <el-table-column prop="eat_phone" label="吃饭人电话" align="center"></el-table-column>
                        <el-table-column label="订餐类型" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.rule.eat_type === 1">早餐</span>
                                <span v-if="scope.row.rule.eat_type === 2">午餐</span>
                                <span v-if="scope.row.rule.eat_type === 3">晚餐</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订餐日期" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.rule.eat_date }}
                            </template>
                        </el-table-column>
                        <el-table-column label="计费规则" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.price_rule ? (scope.row.price_rule === 1 ? '固定餐标' : (scope.row.price_rule === 2 ? '计算餐标' : '计全额')) : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否结算餐费" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_calculated === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="origin_price" label="原价(元)" align="center"></el-table-column>
                        <el-table-column prop="pay_price" label="实际支付价格(元)" align="center"></el-table-column>
                        <el-table-column label="是否自动产生订单" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_auto === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="type_label" label="订单类型" align="center"></el-table-column>
                        <el-table-column prop="status" label="订单状态" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.status === 10">已提交</span>
                                <span v-if="scope.row.status === 20">制作中</span>
                                <span v-if="scope.row.status === 30">已完成</span>
                                <span v-if="scope.row.status === 40">已取消</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="created_at" label="下单时间" align="center"></el-table-column>
                        <el-table-column label="操作" align="center" width="300px">
                            <template slot-scope="scope">
                                <el-button class="filter-item" icon="el-icon-edit" type="primary" size="mini" @click="makeOrder(scope.row)">制作</el-button>
                                <el-button class="filter-item" icon="el-icon-close" type="danger" size="mini" @click="cancelOrder(scope.row)">取消</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleInitSizeChange"
                                @current-change="handleInitCurrentChange"
                                :current-page="queryInit.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="queryInit.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="initTotal">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane :label="makingTitle" name="second">
                <template v-cloak v-if="activeName === 'second'">
                    <div class="filter-container">
                        <el-input v-model="queryMaking.eat_name" class="filter-item w-200" size="medium" placeholder="吃饭人姓名"></el-input>
                        <el-input v-model="queryMaking.eat_phone" class="filter-item w-200" size="medium" placeholder="吃饭人电话"></el-input>
                        <el-select class="filter-item w-200" size="medium" v-model="queryMaking.eat_type" clearable placeholder="订餐类型">
                            <el-option label="早餐" value="1"></el-option>
                            <el-option label="午餐" value="2"></el-option>
                            <el-option label="晚餐" value="3"></el-option>
                        </el-select>
                        <div class="filter-item block">
                            <el-date-picker
                                    size="medium"
                                    v-model="queryMaking.eat_date"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="订餐日期">
                            </el-date-picker>
                        </div>
                        <el-select class="filter-item w-200" size="medium" v-model="queryMaking.is_calculated" clearable placeholder="是否结算餐费">
                            <el-option label="已结算" value="1"></el-option>
                            <el-option label="未结算" value="0"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryMaking.price_rule" clearable placeholder="计费规则">
                            <el-option label="固定餐标" value="1"></el-option>
                            <el-option label="计算餐标" value="2"></el-option>
                            <el-option label="计全额" value="3"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryMaking.orderType" clearable placeholder="订单类型">
                            <el-option label="正常订单" value="normal"></el-option>
                            <el-option label="加餐订单" value="addition"></el-option>
                            <el-option label="子女订单" value="children"></el-option>
                        </el-select>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchMakingList(true)">搜 索</el-button>
                        <el-button class="filter-item" size="medium" icon="el-icon-download" @click="downloadOrder(queryMaking.status)">导出订单</el-button>
                    </div>
                    <el-table v-loading="loading2" :data="bookOrdersMarking" border style="width: 100%">
                        <el-table-column width="100px" label="#" align="center">
                            <template slot-scope="scope" >
                                {{queryMaking.size * (queryMaking.page-1) + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="eat_name" label="吃饭人姓名" align="center"></el-table-column>
                        <el-table-column prop="eat_phone" label="吃饭人电话" align="center"></el-table-column>
                        <el-table-column label="订餐类型" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.rule.eat_type === 1">早餐</span>
                                <span v-if="scope.row.rule.eat_type === 2">午餐</span>
                                <span v-if="scope.row.rule.eat_type === 3">晚餐</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订餐日期" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.rule.eat_date }}
                            </template>
                        </el-table-column>
                        <el-table-column label="计费规则" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.price_rule ? (scope.row.price_rule === 1 ? '固定餐标' : (scope.row.price_rule === 2 ? '计算餐标' : '计全额')) : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否结算餐费" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_calculated === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="origin_price" label="原价(元)" align="center"></el-table-column>
                        <el-table-column prop="pay_price" label="实际支付价格(元)" align="center"></el-table-column>
                        <el-table-column label="是否自动产生订单" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_auto === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="type_label" label="订单类型" align="center"></el-table-column>
                        <el-table-column prop="status" label="订单状态" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.status === 10">已提交</span>
                                <span v-if="scope.row.status === 20">制作中</span>
                                <span v-if="scope.row.status === 30">已完成</span>
                                <span v-if="scope.row.status === 40">已取消</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="making_at" label="制作时间" align="center"></el-table-column>
                        <el-table-column label="操作" align="center" width="300px">
                            <template slot-scope="scope">
                                <el-button class="filter-item" icon="el-icon-success" type="primary" size="mini" @click="completeOrder(scope.row)">完成</el-button>
                                <el-button class="filter-item" icon="el-icon-close" type="danger" size="mini" @click="cancelOrder(scope.row)">取消</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleMakingSizeChange"
                                @current-change="handleMakingCurrentChange"
                                :current-page="queryMaking.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="queryMaking.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="makingTotal">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane :label="completedTitle" name="third">
                <template v-cloak v-if="activeName === 'third'">
                    <div class="filter-container">
                        <el-input v-model="queryCompleted.eat_name" class="filter-item w-200" size="medium" placeholder="吃饭人姓名"></el-input>
                        <el-input v-model="queryCompleted.eat_phone" class="filter-item w-200" size="medium" placeholder="吃饭人电话"></el-input>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCompleted.eat_type" clearable placeholder="订餐类型">
                            <el-option label="早餐" value="1"></el-option>
                            <el-option label="午餐" value="2"></el-option>
                            <el-option label="晚餐" value="3"></el-option>
                        </el-select>
                        <div class="filter-item block">
                            <el-date-picker
                                    size="medium"
                                    v-model="queryCompleted.eat_date"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="订餐日期">
                            </el-date-picker>
                        </div>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCompleted.is_calculated" clearable placeholder="是否结算餐费">
                            <el-option label="已结算" value="1"></el-option>
                            <el-option label="未结算" value="0"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCompleted.price_rule" clearable placeholder="计费规则">
                            <el-option label="固定餐标" value="1"></el-option>
                            <el-option label="计算餐标" value="2"></el-option>
                            <el-option label="计全额" value="3"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCompleted.orderType" clearable placeholder="订单类型">
                            <el-option label="正常订单" value="normal"></el-option>
                            <el-option label="加餐订单" value="addition"></el-option>
                            <el-option label="子女订单" value="children"></el-option>
                        </el-select>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchCompletedList(true)">搜 索</el-button>
                        <el-button class="filter-item" size="medium" icon="el-icon-download" @click="downloadOrder(queryCompleted.status)">导出订单</el-button>
                    </div>
                    <el-table v-loading="loading3" :data="bookOrdersCompleted" border style="width: 100%">
                        <el-table-column width="100px" label="#" align="center">
                            <template slot-scope="scope" >
                                {{queryCompleted.size * (queryCompleted.page-1) + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="eat_name" label="吃饭人姓名" align="center"></el-table-column>
                        <el-table-column prop="eat_phone" label="吃饭人电话" align="center"></el-table-column>
                        <el-table-column label="订餐类型" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.rule.eat_type === 1">早餐</span>
                                <span v-if="scope.row.rule.eat_type === 2">午餐</span>
                                <span v-if="scope.row.rule.eat_type === 3">晚餐</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订餐日期" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.rule.eat_date }}
                            </template>
                        </el-table-column>
                        <el-table-column label="计费规则" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.price_rule ? (scope.row.price_rule === 1 ? '固定餐标' : (scope.row.price_rule === 2 ? '计算餐标' : '计全额')) : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否结算餐费" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_calculated === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="origin_price" label="原价(元)" align="center"></el-table-column>
                        <el-table-column prop="pay_price" label="实际支付价格(元)" align="center"></el-table-column>
                        <el-table-column label="是否自动产生订单" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_auto === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="type_label" label="订单类型" align="center"></el-table-column>
                        <el-table-column prop="status" label="订单状态" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.status === 10">已提交</span>
                                <span v-if="scope.row.status === 20">制作中</span>
                                <span v-if="scope.row.status === 30">已完成</span>
                                <span v-if="scope.row.status === 40">已取消</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="finished_at" label="完成时间" align="center"></el-table-column>
                        <el-table-column label="操作" align="center" width="200px">
                            <template slot-scope="scope">
                                <el-button class="filter-item" icon="el-icon-close" type="danger" size="mini" @click="cancelOrder(scope.row)">取消</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleCompletedSizeChange"
                                @current-change="handleCompletedCurrentChange"
                                :current-page="queryCompleted.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="queryCompleted.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="completedTotal">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane :label="canceledTitle" name="fourth">
                <template v-cloak v-if="activeName === 'fourth'">
                    <div class="filter-container">
                        <el-input v-model="queryCanceled.eat_name" class="filter-item w-200" size="medium" placeholder="吃饭人姓名"></el-input>
                        <el-input v-model="queryCanceled.eat_phone" class="filter-item w-200" size="medium" placeholder="吃饭人电话"></el-input>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCanceled.eat_type" clearable placeholder="订餐类型">
                            <el-option label="早餐" value="1"></el-option>
                            <el-option label="午餐" value="2"></el-option>
                            <el-option label="晚餐" value="3"></el-option>
                        </el-select>
                        <div class="filter-item block">
                            <el-date-picker
                                    size="medium"
                                    v-model="queryCanceled.eat_date"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="订餐日期">
                            </el-date-picker>
                        </div>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCanceled.is_calculated" clearable placeholder="是否结算餐费">
                            <el-option label="已结算" value="1"></el-option>
                            <el-option label="未结算" value="0"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCanceled.price_rule" clearable placeholder="计费规则">
                            <el-option label="固定餐标" value="1"></el-option>
                            <el-option label="计算餐标" value="2"></el-option>
                            <el-option label="计全额" value="3"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="queryCanceled.orderType" clearable placeholder="订单类型">
                            <el-option label="正常订单" value="normal"></el-option>
                            <el-option label="加餐订单" value="addition"></el-option>
                            <el-option label="子女订单" value="children"></el-option>
                        </el-select>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchCanceledList(true)">搜 索</el-button>
                        <el-button class="filter-item" size="medium" icon="el-icon-download" @click="downloadOrder(queryCanceled.status)">导出订单</el-button>
                    </div>
                    <el-table v-loading="loading4" :data="bookOrdersCanceled" border style="width: 100%">
                        <el-table-column width="100px" label="#" align="center">
                            <template slot-scope="scope" >
                                {{queryCanceled.size * (queryCanceled.page-1) + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="eat_name" label="吃饭人姓名" align="center"></el-table-column>
                        <el-table-column prop="eat_phone" label="吃饭人电话" align="center"></el-table-column>
                        <el-table-column label="订餐类型" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.rule.eat_type === 1">早餐</span>
                                <span v-if="scope.row.rule.eat_type === 2">午餐</span>
                                <span v-if="scope.row.rule.eat_type === 3">晚餐</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订餐日期" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.rule.eat_date }}
                            </template>
                        </el-table-column>
                        <el-table-column label="计费规则" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.price_rule ? (scope.row.price_rule === 1 ? '固定餐标' : (scope.row.price_rule === 2 ? '计算餐标' : '计全额')) : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否结算餐费" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_calculated === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="origin_price" label="原价(元)" align="center"></el-table-column>
                        <el-table-column prop="pay_price" label="实际支付价格(元)" align="center"></el-table-column>
                        <el-table-column label="是否自动产生订单" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_auto === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="type_label" label="订单类型" align="center"></el-table-column>
                        <el-table-column prop="status" label="订单状态" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.status === 10">已提交</span>
                                <span v-if="scope.row.status === 20">制作中</span>
                                <span v-if="scope.row.status === 30">已完成</span>
                                <span v-if="scope.row.status === 40">已取消</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="canceled_at" label="取消时间" align="center"></el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleCanceledSizeChange"
                                @current-change="handleCanceledCurrentChange"
                                :current-page="queryCanceled.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="queryCanceled.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="canceledTotal">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { fetchBookOrder, updateBookOrder } from '@/api/book-order'
    export default {
      name: 'bookOrder',
      data() {
        return {
          form: {
            eat_name: '',
            eat_phone: '',
            price_rule: '',
            is_calculated: '',
            origin_price: '',
            pay_price: '',
            is_auto: '',
            status: '',
            created_at: '',
            user: {
              name: ''
            }
          },
          dialogVisible: false,
          query: {
            type: '',
            status: 10
          },
          activeName: 'first',
          bookOrdersInit: [],
          bookOrdersMarking: [],
          bookOrdersCompleted: [],
          bookOrdersCanceled: [],
          loading: false,
          loading2: false,
          loading3: false,
          loading4: false,
          initTotal: 0,
          makingTotal: 0,
          completedTotal: 0,
          canceledTotal: 0,
          queryInit: {
            type: '',
            size: 10,
            page: 1,
            status: 10,
            eat_name: '',
            eat_phone: '',
            is_calculated: '',
            price_rule: '',
            eat_type: '',
            eat_date: '',
            orderType: ''
          },
          queryMaking: {
            type: '',
            size: 10,
            page: 1,
            status: 20,
            eat_name: '',
            eat_phone: '',
            is_calculated: '',
            price_rule: '',
            eat_type: '',
            eat_date: '',
            orderType: ''
          },
          queryCompleted: {
            type: '',
            size: 10,
            page: 1,
            status: 30,
            eat_name: '',
            eat_phone: '',
            is_calculated: '',
            price_rule: '',
            eat_type: '',
            eat_date: '',
            orderType: ''
          },
          queryCanceled: {
            type: '',
            size: 10,
            page: 1,
            status: 40,
            eat_name: '',
            eat_phone: '',
            is_calculated: '',
            price_rule: '',
            eat_type: '',
            eat_date: '',
            orderType: ''
          }
        }
      },
      computed: {
        initTitle() {
          return '已提交(' + this.initTotal + ')'
        },
        makingTitle() {
          return '制作中(' + this.makingTotal + ')'
        },
        completedTitle() {
          return '已完成(' + this.completedTotal + ')'
        },
        canceledTitle() {
          return '已取消(' + this.canceledTotal + ')'
        }
      },
      methods: {
        // 将订单状态修改为制作中 - (已提交)
        makeOrder(row) {
          this.$confirm('确定制作该订单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.query.type = 'making'
            this.query.status = row.status
            updateBookOrder(this.query, row.id).then(res => {
              if (res.result === 'failed') {
                this.$message.error(res.msg)
              } else {
                this.$message.success('订单制作成功')
                this.fetchInitList()
                this.fetchMakingList()
              }
            }).catch(err => {
              this.$handleNotFound(err, '订单不存在')
            })
          })
        },
        // 将订单状态修改为已完成 - (制作中)
        completeOrder(row) {
          this.$confirm('确定完成该订单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.query.type = 'complete'
            this.query.status = row.status
            updateBookOrder(this.query, row.id).then(res => {
              if (res.result === 'failed') {
                this.$message.error(res.msg)
              } else {
                this.$message.success('订单已修改为已完成')
                this.fetchMakingList()
                this.fetchCompletedList()
              }
            }).catch(err => {
              this.$handleNotFound(err, '订单不存在')
            })
          })
        },
        // 将订单状态修改为已取消 - (已提交，制作中，已完成) - （已结算订单不能取消）
        cancelOrder(row) {
          this.$confirm('确定取消该订单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.query.type = 'cancel'
            this.query.status = row.status
            updateBookOrder(this.query, row.id).then(res => {
              if (res.result === 'failed') {
                this.$message.error(res.msg)
              } else {
                this.$message.success('订单取消成功')
                this.getSchoolInfo()
              }
            }).catch(err => {
              this.$handleNotFound(err, '订单不存在')
            })
          })
        },
        // 获取当前学校id
        getSchoolInfo() {
          this.loading = true
          this.fetchInitList()
          this.fetchMakingList()
          this.fetchCompletedList()
          this.fetchCanceledList()
        },
        // 已提交订单列表
        fetchInitList(resetPage = false) {
          this.queryInit.type = ''
          this.loading = true
          if (resetPage) {
            this.queryInit.page = 1
          }
          fetchBookOrder(this.queryInit).then(res => {
            this.bookOrdersInit = res.data
            this.initTotal = res.meta.total
            this.loading = false
          })
        },
        handleInitSizeChange(size) {
          this.queryInit.size = size
          this.fetchInitList()
        },
        handleInitCurrentChange(page) {
          this.queryInit.page = page
          this.fetchInitList()
        },
        // 制作中订单列表
        fetchMakingList(resetPage = false) {
          this.queryMaking.type = ''
          this.loading2 = true
          if (resetPage) {
            this.queryMaking.page = 1
          }
          fetchBookOrder(this.queryMaking).then(res => {
            this.bookOrdersMarking = res.data
            this.makingTotal = res.meta.total
            this.loading2 = false
          })
        },
        handleMakingSizeChange(size) {
          this.queryMaking.size = size
          this.fetchMakingList()
        },
        handleMakingCurrentChange(page) {
          this.queryMaking.page = page
          this.fetchMakingList()
        },
        // 已完成订单列表
        fetchCompletedList(resetPage = false) {
          this.queryCompleted.type = ''
          this.loading3 = true
          if (resetPage) {
            this.queryCompleted.page = 1
          }
          fetchBookOrder(this.queryCompleted).then(res => {
            this.bookOrdersCompleted = res.data
            this.completedTotal = res.meta.total
            this.loading3 = false
          })
        },
        handleCompletedSizeChange(size) {
          this.queryCompleted.size = size
          this.fetchCompletedList()
        },
        handleCompletedCurrentChange(page) {
          this.queryCompleted.page = page
          this.fetchCompletedList()
        },
        // 已取消订单列表
        fetchCanceledList(resetPage = false) {
          this.queryCanceled.type = ''
          this.loading4 = true
          if (resetPage) {
            this.queryCanceled.page = 1
          }
          fetchBookOrder(this.queryCanceled).then(res => {
            this.bookOrdersCanceled = res.data
            this.canceledTotal = res.meta.total
            this.loading4 = false
          })
        },
        handleCanceledSizeChange(size) {
          this.queryCanceled.size = size
          this.fetchCanceledList()
        },
        handleCanceledCurrentChange(page) {
          this.queryCanceled.page = page
          this.fetchCanceledList()
        },
        // 导出订单
        downloadOrder(status) {
          this.$confirm('确定导出?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (status === 10) {
              this.exportOrder(this.queryInit)
            } else if (status === 20) {
              this.exportOrder(this.queryMaking)
            } else if (status === 30) {
              this.exportOrder(this.queryCompleted)
            } else if (status === 40) {
              this.exportOrder(this.queryCanceled)
            }
          }).catch(() => {})
        },
        exportOrder(row) {
          row.type = 'export'
          fetchBookOrder(row).then(res => {
            if (res.length === 0) {
              this.$message('无数据')
            } else {
              const filename = this.$moment().format('YYYY-MM-DD') + '-' + parseInt(10000 * Math.random())
              const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' }
              const list = res
              const tHeader = ['学校', '吃饭人姓名', '吃饭人电话', '订餐类型', '订餐日期', '原价', '实际支付价格', '是否结算餐费', '计算规则', '订单类型', '订单状态', '下单时间', '制作时间', '完成时间', '取消时间']
              const filterVal = ['school_name', 'eat_name', 'eat_phone', 'eat_type', 'eat_date', 'origin_price', 'pay_price', 'is_calculate', 'rule_name', 'type_label', 'status_label', 'created_at', 'making_at', 'finished_at', 'canceled_at']
              const data = this.formatJson(filterVal, list)
              data.unshift(tHeader)
              const wb = { SheetNames: [], Sheets: {}}
              const ws = this.sheet_from_array_of_arrays(data)
              ws['!cols'] = []
              for (let n = 0; n !== filterVal.length; ++n) {
                ws['!cols'].push({
                  wpx: 100
                })
              }
              ws['!rows'] = [{ hpx: 20 }]
              wb.SheetNames.push(filename)
              wb.Sheets[filename] = ws
              const tmpDown = new Blob([this.s2ab(this.$xlsx.write(wb, wopts))], { type: 'application/octet-stream' })
              this.$fileSaver.saveAs(tmpDown, filename + '.xlsx')
            }
          })
        },
        sheet_from_array_of_arrays(data) {
          const ws = {}
          const range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 }}
          for (let R = 0; R !== data.length; ++R) {
            for (let C = 0; C !== data[R].length; ++C) {
              if (range.s.r > R) range.s.r = R
              if (range.s.c > C) range.s.c = C
              if (range.e.r < R) range.e.r = R
              if (range.e.c < C) range.e.c = C
              const cell = {
                v: data[R][C],
                s: {
                  alignment: { horizontal: 'center', vertical: 'center' }
                }
              }
              if (cell.v == null) continue
              const cell_ref = this.$xlsx.utils.encode_cell({ c: C, r: R })
              if (typeof cell.v === 'number') {
                cell.t = 'n'
              } else if (typeof cell.v === 'boolean') {
                cell.t = 'b'
              } else if (cell.v instanceof Date) {
                cell.t = 'n'
                cell.z = this.$xlsx.SSF._table[14]
                cell.v = this.datenum(cell.v)
              } else {
                cell.t = 's'
              }
              ws[cell_ref] = cell
            }
          }
          if (range.s.c < 10000000) ws['!ref'] = this.$xlsx.utils.encode_range(range)
          return ws
        },
        datenum(v, date1904) {
          if (date1904) v += 1462
          const epoch = Date.parse(v)
          return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
        },
        s2ab(s) {
          const buf = new ArrayBuffer(s.length)
          const view = new Uint8Array(buf)
          for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
          return buf
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        }
      },
      created() {
        this.getSchoolInfo()
      }
    }
</script>

<style scoped>
    .el-icon-check{
        color: green;
    }
    .el-icon-close{
        color: red;
    }
</style>
